<template>
  <div>
    <div class="block">
      <span class="demonstration">评分</span>
      <el-rate v-model="rate" :colors="colors" @change="$emit('callFather',rate)"> </el-rate>
    </div>
  </div>
</template>
<script>
export default {
  //子组件不能直接修改自定义属性, 不然要报错
  props: ["rateValue"],
  data() {
    return {
      //定义一个变量, 将自定义属性的值赋予该变量
      rate: this.rateValue,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  //设置监听属性, 解决单向数据流问题, 不会报错
  watch: {
    //监听
    rateValue: function (newValue, oldValue) {
      this.rate = newValue;
    },
  },
};
</script>